<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>TK42论坛</title>
  <link type="text/css" rel="stylesheet" href="luntan.css" />
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>

<body>
  <div class="bbs">
    <header><span onclick="iWantPost()">我要发帖</span></header>
    <section>
      <ul id="postList">
      </ul>
    </section>
    <div class="post" id="post1">
      <input id="title" placeholder="请输入标题（1-50个字符）">
      所属版块：<select id="board">
        <option>请选择版块</option>
        <option>吹水冒泡</option>
        <option>学习分享</option>
        <option>问题答疑</option>
        <option>意见反馈</option>
      </select>
      <textarea class="content" id="content" placeholder="请输入内容（300字以内）" oninput="limitTextarea(this, 300)"></textarea>
      <span id="char-count">字符数：0 / 300</span>
      <input class="btn" value="发布" onclick="post()">
    </div>
  </div>
</body>

</html>

<script>
  function limitTextarea(textarea, maxLength) {
    var text = textarea.value;
    if (text.length > maxLength) {
      textarea.value = text.substring(0, maxLength);
    }
    var charCount = document.getElementById("char-count");
    charCount.textContent = "字符数：" + textarea.value.length + " / " + maxLength;
  }

  function iWantPost() {
    document.getElementById("post1").style.display = "block";
  }

  function headPortrait() {
    //使用数组保存发帖者的头像
    var head = new Array("01.jpg", "02.jpg");
    //生成 0 到 数组长度之间的随机数
    var n = parseInt(Math.random() * 2);
    return head[n];
  }

  function post() {
    document.getElementById("post1").style.display = "none";
    /* 创建节点 */
    var ul = document.getElementsByTagName("ul")[0];
    var li = document.createElement("li");
    var div = document.createElement("div");
    var img = document.createElement("img");
    var h1 = document.createElement("h1");
    var p = document.createElement("p");
    var span = document.createElement("span");

    // 获取标题、内容和板块的值
    var title = document.getElementById("title").value;
    var content = document.getElementById("content").value;
    var board = document.getElementById("board").value;

    // 创建一个对象来存储新帖子数据
    const newPostData = {
      header: title,
      author: "当前用户",
      context: content,
      module: board
    };

    const jsonData = JSON.stringify(newPostData);

    // 使用 Axios 发送 POST 请求将新帖子数据发送到后端接口
    axios.post('https://31d4ab8f.r2.cpolar.cn/topic/add', newPostData)
      .then(response => {
        // 在这里处理后端的响应
        console.log('帖子发布成功:', response.data);
        // 刷新页面或更新UI以反映新发布的帖子
        fetchAndDisplayPosts(); // 获取并显示最新的帖子数据
      })
      .catch(error => {
        console.error('发布帖子时出错:', error);
      });


    ul.appendChild(li);
    li.className = ".bbs section ul li";

    li.appendChild(div);
    div.className = ".bbs section ul li div";

    // 插入头像
    div.appendChild(img);
    img.className = ".bbs section ul li div img";
    img.src = "./touxiang/" + headPortrait();

    // 插入标题
    li.appendChild(h1);
    h1.className = ".bbs section ul li h1";
    h1.innerHTML = document.getElementById("title").value;

    // 插入内容
    var contentTextarea = document.querySelector(".content");
    var content = contentTextarea.value;
    var contentParagraph = document.createElement("p"); // 创建新的p元素
    contentParagraph.className = ".bbs section ul li p"; // 设置类名
    contentParagraph.innerHTML = "内容：" + content;
    li.appendChild(contentParagraph); // 将内容段落添加到li中

    // 插入板块
    var selectedOption = document.querySelector("select option:checked");
    var board = selectedOption.textContent;
    var boardParagraph = document.createElement("p"); // 创建新的p元素
    boardParagraph.className = ".bbs section ul li p"; // 设置类名
    boardParagraph.innerHTML = "版块：" + board;
    li.appendChild(boardParagraph); // 将板块段落添加到li中

    // 插入时间
    li.appendChild(span); // 将时间段落添加到li中
    span.className = ".bbs section ul li p span";


    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth() + 1;
    var day = today.getDate();
    var hour = today.getHours();
    var minute = today.getMinutes();
    var second = today.getSeconds();

    span.innerHTML = "发表时间：" + year + "-" + month + "-" + day + "&nbsp;" + hour + ":" + minute + ":" + second;

    document.getElementById("title").value = "";
    contentTextarea.value = "";
    document.getElementsByTagName("select")[0].value = "";
    ul.insertBefore(li, ul.firstElementChild);
  }
</script>